<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="false"  @click="labelFun" >
            <i class="el-icon-s-unfold"></i>
          </el-radio-button>
          <el-radio-button :label="true">
             <i class="el-icon-s-fold"></i>
          </el-radio-button>
        </el-radio-group> -->
        <el-menu
          router
          default-active="/backHome/panel"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <el-menu-item index="/backHome/panel">
            <i class="el-icon-odometer"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/backHome/article">
            <i class="el-icon-document"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/backHome/category">
            <i class="el-icon-folder-opened"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/backHome/tag">
            <i class="el-icon-price-tag"></i>
            <span slot="title">标签管理</span>
          </el-menu-item>
          <el-menu-item index="/backHome/settings">
            <i class="el-icon-setting"></i>
            <span slot="title">博客设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="switch">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="false">
                <i class="el-icon-s-unfold"></i>
              </el-radio-button>
              <el-radio-button :label="true">
                <i class="el-icon-s-fold"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="right">
            <div class="button">
              <el-tooltip
                class="item"
                effect="dark"
                content="返回首页"
                placement="bottom"
              >
                <el-button icon="el-icon-s-home" circle @click="goHomeFun">
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="刷新页面"
                placement="bottom"
              >
                <el-button
                  icon="el-icon-refresh-left"
                  circle
                  @click="screenFun"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="全屏"
                placement="bottom"
              >
                <el-button icon="el-icon-full-screen" circle @click="screenFun">
                </el-button>
              </el-tooltip>
            </div>
            <el-dropdown>
              <div class="user">
                <img
                  src="http://47.104.167.34:9000/byesame2023/30e29224ec3043099f0fa48b7ed60cbf.png"
                  alt="用户头像"
                />
                <p type="primary">这是名字</p>
                <i class="el-icon-arrow-down"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-circle-plus"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>这是结尾</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goHomeFun() {
      this.$router.push("/home");
    },
    screenFun() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch((err) => {
          console.log("进入全屏失败:", err);
        });
      } else {
        document.exitFullscreen().catch((err) => {
          console.log("退出全屏失败:", err);
        });
      }

      // const docEL = document.documentElement;
      // if(docEL.requestFullscreen){
      //   docEL.requestFullscreen()
      // }else if(document.exitFullscreen){
      //   document.exitFullscreen()
      // }
    },
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.right {
  display: flex;
  justify-content: center;
}
.button {
  display: flex;
  align-items: center;
}
.button > i {
  margin: 0 10px;
  font-size: 2vw;
}
.el-dropdown {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.user {
  display: flex;
  align-items: center;
}
.user > img {
  margin: 0 10px;
  width: 30px;
  height: 30px;
}
.el-main {
  background-color: #f4f4f4;
}
</style>